<template>
  <div class="avatar-upload">
    <div class="avatar-show">
        <template v-if="localFile">
            <img :src="localFile"/>
        </template>
        <template v-else>
            <img :src="`/api/getAvatar/${modelValue.userId}`"/>
        </template>
    </div>
    <div class="select-btn ">
        <el-upload
            name="file"
            :show-file-list="false"
            accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
            :multiple="false"
            :http-request="uploadImage">
            <el-button type="primary" plain>选择</el-button>
        </el-upload>
        
    </div>
  </div>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance} from "vue";
    import { useRouter, useRoute} from "vue-router";
    const { proxy} = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();
    const timestamp = ref("")
    const props = defineProps({
        modelValue:{
            type:Object,
            default:null,
        },
    })
    const localFile = ref(null);
    const emit = defineEmits();
    const uploadImage = async (file) =>{
        file = file.file;
        let img = new FileReader();
        img.readAsDataURL(file);
        // 本地显示
        img.onload = ({target})=>{
            localFile.value = target.result;
        };

        console.log(file)
        // 暴露出去
        emit("update:modelValue",file);
    }
</script>

<style lang="scss" scoped>
.avatar-upload{
    display: flex;
    justify-content: center;
    align-items: end;
    .avatar-show{
        background: rgb(245, 245, 245);
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        .iconfont{
            font-size: 50px;
            color: #ddd;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .op{
            position:absolute;
            color: var(--theme2);
            top:80px;
        }
    }
    .select-btn{
        margin-left: 10px;
        vertical-align: bottom;
    }
}
</style>